<!--
 * @Author: wangming
 * @Date: 2021-05-27 14:01:15
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-19 17:34:46
 * @Description: file content
-->
<template>
  <el-form
    disabled
    class="max sz rel"
    :model="formDate"
    ref="form"
    size="small"
    :labelPosition="config.__config.position"
  >
    <draggable
      data-key="formlayout"
      :delay="50"
      :forceFallback="true"
      chosen-class="drawing-chosen"
      drag-class="drawing-drag"
      @add="(v) => clickAdd(v)"
      class="drawing-board pb30"
      group="form"
      :animation="200"
      :list="config.children"
      tag="el-row"
      handle=".mover"
      :style="styles"
    >
      <template v-for="(i, index) in config.children">
        <component
          :parentIndex="parentIndex"
          :configIndex="index"
          :parentList="configList"
          :configList="config.children"
          :is="i.__config.type === 'rowLayout' ? 'rowLayout' : 'formItemDesgic'"
          isEdit
          :itemChecked="i.key === getModelForm.key"
          :class="{
            active: i.key === getModelForm.key,
          }"
          @deltag="deltag(index, config.children)"
          @click.native.stop="clickAdd({ newIndex: index })"
          :key="i.key"
          :config="i"
          :form="formDate"
        ></component>
      </template>
    </draggable>
    <div class="abs nochildren" v-show="!config.children.length">
      请拖入组件
    </div>
  </el-form>
</template>
<script>
import mixins from "./mixins.js";
import rowLayout from "./index.vue";
import { mapActions } from "vuex";
import formItemDesgic from "../formItem_desgic/index.vue";
export default {
  components: { formItemDesgic, rowLayout },
  computed: {
    styles() {
      let height = this.config.__config.height || 150;
      return {
        minHeight: height + "px",
      };
    },
  },
  provide() {
    if (!this.isTableAdd) {
      return {
        parentLayout: "hlLayoutForm",
        formState: () => ({
          labelSuffix: this.config.__config.labelSuffix,
          cssStyle: {
            fontSize: (this.config.__config.labelFontSize || "14") + "px",
            color: this.config.__config.labelColor || "#606266",
          },
          labelStyle: this.config.__config.labelStyle?.join(" "),
        }),
      };
    } else {
      return {
        injectModelCode: () => this.config.__config.modelCode,
        injectChildren: () => this.config.children,
      };
    }
  },
  destroyed() {
    this.setForm();
  },
  props: {
    parentIndex: {
      type: Number,
      default: 0,
    },
    isTableAdd: {
      type: Boolean,
      default: false,
    },
    configList: {
      type: Array,
      default: () => [],
    },
  },
  mixins: [mixins],
  data() {
    return {
      formDate: {},
    };
  },
  methods: {
    ...mapActions(["setForm"]),
    clickAdd(v) {
      //code 兼容老版本业务
      let modelCode =
        this.config.__config.modelCode || this.config.__config.code;
      this.handleAdd(Object.assign({}, v, { modelCode }), this.config.children);
    },
  },
};
</script>

<style lang="scss" scoped>
.max {
  width: 100%;
  border: 1px solid #f1f1f1;
}
.nochildren {
  color: #dedede;
  font-size: 28px;
  width: 100%;
  text-align: center;
  top: 100px;
}
</style>
